<template>
	<div class="mainContent">
		<el-row>
			<div class="bread-nav">
				<span class="bread-item">商品管理</span>
				<span class="bread-icon">&gt;</span>
				<span class="bread-item">商品款式</span>
				<span class="bread-icon">&gt;</span>
				<span class="bread-item activeNavs" @click="backStyleInfo()">商品信息</span>
				<span class="bread-icon">&gt;</span>
				<span class="bread-item">查看</span>
			</div>
			<div class="detials-contant">
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">商品款式信息</div>
					</div>
				</el-row>
				<ul class="dialog-cammon-ul msgUl">
					<li><span class="dialog-list-key">款式号:</span><span class="dialog-list-value">{{Model.row.modelNo}}</span></li>
					<li><span class="dialog-list-key">款式名称:</span><span class="dialog-list-value">{{Model.row.modelName}}</span></li>
					<li><span class="dialog-list-key">品类:</span><span class="dialog-list-value">{{Model.row.productCategoryCategory}}</span></li>
					<li><span class="dialog-list-key">销售分类:</span><span class="dialog-list-value">{{Model.row.salesOfClassification}}</span></li>
					<li><span class="dialog-list-key">系列:</span><span class="dialog-list-value">{{Model.row.aseriesOf}}</span></li>
					<li><span class="dialog-list-key">主石形状:</span><span class="dialog-list-value">{{Model.row.theMainStoneShape}}</span></li>
					<li><span class="dialog-list-key">主石外观:</span><span class="dialog-list-value">{{Model.row.theMainStoneAppearance}}</span></li>
					<li><span class="dialog-list-key">副石粒数:</span><span class="dialog-list-value">{{Model.row.deputyStoneGrainNumber}}</span></li>
					<!-- <li><span class="dialog-list-key">副石材质:</span><span class="dialog-list-value">{{Model.row.secondaryStoneMaterial}}</span></li> -->
					<li><span class="dialog-list-key">标准戒壁厚度:</span><span class="dialog-list-value">{{Model.row.standardRingWallThickness}}</span></li>
					<li><span class="dialog-list-key">标准戒壁宽度:</span><span class="dialog-list-value">{{Model.row.standardRingWallWidth}}</span></li>
					<li><span class="dialog-list-key">是否可定制:</span><span class="dialog-list-value">{{Model.row.canItBeCustomized}}</span></li>
					<li><span class="dialog-list-key">是否可刻字:</span><span class="dialog-list-value">{{Model.row.whetherLetteringIsPossible}}</span></li>
					<li><span class="dialog-list-key">门店上下架:</span><span class="dialog-list-value">{{Model.row.storeLoadingAndUnloading}}</span></li>
					<li><span class="dialog-list-key">是否特殊款式:</span><span class="dialog-list-value">{{Model.row.isThereAnySpecialStyle}}</span></li>
				</ul>
				<ul class="commonTabs">
					<li v-for="(item,index) in Model.tabsList" :class="[Model.activeName == item.value ? 'activetab' : '','commonTabItem']"
					 @click="tabsHandleClick(item.value)">
						<span class="commonTabLabel">{{item.label}}</span>
					</li>
				</ul>
				<!--  -->
				<el-row class="common-table-con el-row">
					<el-table style="margin-top: 26px;" :data="Model.tableData" max-height="500">
						<el-table-column align="center" v-for="(item,index) in Model.tableHeaderData" v-if="item.prop == 'imgUrl' " :key="item.prop"
						 :prop="item.prop" :label="item.label" :width="item.width">
							<template slot-scope="scope">
								<div class="scopecont">
									<el-tooltip placement="top" effect="light">
										<div slot="content"><img class="maxTableImg" :src="scope.row.imgUrl" alt=""></div>
										<img class="mainTableImg" :src="scope.row.imgUrl" alt="">
									</el-tooltip>
								</div>
							</template>
						</el-table-column>
						<el-table-column align="center" v-else :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width">
						</el-table-column>
						<el-table-column v-if="Model.activeName == 'material' " align="center" fixed="right" label="操作" width="160">
							<template slot="header" slot-scope="scope">
								<div class="detialHeader">
									<span class="font">操作</span>
									<el-tooltip placement="top">
										<div slot="content">1.每次只能上传一张图片<br />2.只能上传图片格式文件<br />3.上传图片不要超过10M</div>
										<img class="detialHeaderIcon" src="../../../../../assets/img/icon_question mark.png" alt="">
									</el-tooltip>
								</div>
							</template>
							<template slot-scope="scope">
								<div class="detialTd">
									<div class="detialCell upload">
										上传
										<input class="upfile" type="file" @change="upfileChange($event,scope.row)">
									</div>
									<div class="detialCell del" @click="deleteImg(scope.row)">删除</div>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页 -->
					<!-- 产品需求大类不需要分页，中类和小类则需要 -->
					<el-row class="pagination-cont">
						<el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page="Model.paginationObject.currentPage"
						 :page-sizes="[10, 20, 30, 40]" :pager-count="5" :page-size="Model.paginationObject.pageSize" layout="sizes, prev, pager, next, jumper, slot"
						 :total="Model.paginationObject.total">
							<div class="pagination-slot">
								显示
								<p class="slot-i">{{Model.paginationObject.num1}}</p>
								到
								<p class="slot-i">{{Model.paginationObject.num2}}</p>
								，共
								<p class="slot-i">{{Model.paginationObject.total}}</p>
								记录
							</div>
						</el-pagination>
					</el-row>
				</el-row>
			</div>
			<!-- 确认删除 -->
			<el-dialog :visible.sync="Model.dialogAlert" top="100px" class="confirm-dialo">
				<!--  -->
				<div class="common-table-title">
					<div class="common-table-icon"></div>
					<div class="common-table-fl">操作提示</div>
				</div>
				<!--  -->
				<p class="confirm-dialo-msg">确认删除图片吗？</p>
				<div class="confirm-btn-group">
					<span @click="confirmDeleteImg" class="confirm-btn item-btn">确认</span>
					<span @click="Model.dialogAlert = false" class="cancel-btn item-btn">取消</span>
				</div>
			</el-dialog>
		</el-row>

	</div>
</template>

<script>
	// import advancedSearch from "../../../../components/common/filter/advancedSearch"
	import Model from './model.js'
	import Controller from './controller.js'
	export default {
		name: 'moreDetail',
		mixins: [Model, Controller],
		components: {
			// advancedSearch
		},
		props: [
			''
		],
		created() {
			this.getTable(this.Model.activeName);
			var row = this.$route.query.row;
			row = JSON.parse(row)
			this.Model.row = row;
			console.log(this.Model.row)
		},
		mounted() {

		},


	}
</script>

<style scoped>
	.bread-nav {
		width: 100%;
		height: 48px;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding-left: 25px;
		box-sizing: border-box;
		font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #888888;
	}

	.bread-icon {
		padding: 6px;
	}

	.commonTabs {
		display: flex;
		font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #222222;
		background-color: #fff;
		margin-top: 16px;
		border-radius: 8px 8px 0 0;
		margin-bottom: 1px;
	}

	.commonTabItem {
		padding: 18px 34px;
		box-sizing: border-box;
		cursor: pointer;
	}

	.activetab span {
		line-height: 1;
		padding: 12px 0;
	}

	.activetab .commonTabLabel {
		color: #7e6b5a;
		border-bottom: 4px solid #7e6b5a;
	}

	.msgUl {
		font-size: 14px;
		background-color: #fff;
		border-radius: 0 0 8px 8px;
		padding: 16px 0 20px 36px;
	}

	.msgUl li {
		width: 20%;
	}

	.activeNavs {
		color: #987453;
		cursor: pointer;
	}

	.detials-contant {
		padding: 24px;
	}

	.detialHeader {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.detialHeader .detialHeaderIcon {
		margin-left: 4px;
		cursor: pointer;
	}

	.detialTd {
		display: flex;
	}

	.detialCell {
		padding: 4px 12px;
		border-radius: 12px;
		border: 1px solid #7e6b5a;
		line-height: 1;
		cursor: pointer;
		margin-left: 6px;
	}

	.detialTd .upload {
		color: #7e6b5a;
		position: relative
	}

	.detialTd .del {
		color: #f95050;
		border: 1px solid #f95050;
	}

	.upfile {
		width: 100%;
		height: 100%;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		cursor: pointer;
	}

	.pagination-cont {
		height: 88px;
		display: flex;
		align-items: center;
		background-color: #fff;
	}

	.mainTableImg {
		width: 60px;
		height: 60px;
		display: block;
	}

	.maxTableImg {
		display: block;
		width: 200px;
		height: 200px;
		cursor: pointer;
	}

	.scopecont {
		display: flex;
		justify-content: center;
	}
</style>
